<template>
  <div style="margin-top: 2vh">
    <div style="background-color: white; width: 68vw; margin: auto;">
      <!-- 上方标题 -->
      <div style="border-bottom: 1px solid #e9e9e9; height: 7vh; width: 100%;">
        <span style="font-weight: bold; font-size: 1.1rem; line-height: 7vh; margin-left: 1.5vw;">继续教育信息</span>
      </div>

      <pdf-preview :pdf-url="form.pdfUrl"></pdf-preview>
    </div>

    <!-- 填写信息 -->
    <div style="background-color: white; width: 68vw; margin: auto; display: flex; flex-direction: column; padding-bottom: 5vh; margin-top: 3vh">
      <div style="flex: 1;">
        <div style="border-bottom: 1px solid #e9e9e9; height: 7vh;">
          <span style="font-weight: bold; font-size: 1.1rem; line-height: 7vh; margin-left: 1.5vw">信息详情</span>
        </div>
        <div>
          <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" style="margin-top: 5vh">
            <el-form-item label="材料标题" prop="title">
              <el-input
                  v-model="form.title"
                  placeholder="请输入材料标题"
                  style="width: 34vw;"
              ></el-input>
            </el-form-item>

            <el-form-item label="培训单位" prop="trainingUnit">
              <el-input
                  v-model="form.trainingUnit"
                  placeholder="请输入培训单位"
                  style="width: 34vw;"
              ></el-input>
            </el-form-item>

            <el-form-item label="课时" prop="hours">
              <el-input-number
                  v-model="form.hours"
                  :precision="1"
                  :step="0.5"
                  :min="0"
                  style="width: 34vw;"
              ></el-input-number>
            </el-form-item>

            <el-form-item label="评分/等级" prop="score">
              <el-input
                  v-model="form.score"
                  placeholder="如: 80/优"
                  style="width: 34vw;"
              ></el-input>
            </el-form-item>

            <el-form-item label="获得时间" prop="obtainTime">
              <el-date-picker
                  v-model="form.obtainTime"
                  type="date"
                  placeholder="选择日期"
                  format="YYYY-MM-DD"
                  value-format="x"
                  style="width: 34vw;"
              ></el-date-picker>
            </el-form-item>

            <el-form-item label="关联课题" prop="projectId">
              <el-input
                  v-model="form.projectId"
                  placeholder="请选择成果所属课题"
                  style="width: 34vw;"
              ></el-input>
            </el-form-item>

            <el-form-item label="备注信息" prop="remarks">
              <el-input
                  type="textarea"
                  v-model="form.remarks"
                  :rows="4"
                  placeholder="请输入备注信息"
                  style="width: 34vw;"
              ></el-input>
            </el-form-item>
          </el-form>

          <div style="display: flex; justify-content: center; margin-top: 2vh">
            <button class="upload-button" style="width: 10vw;" @click="submitForm">返 回</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

import { useRoute, useRouter } from 'vue-router'
import {getMaterial} from "@/api/result/material.js";
import {getProjectNameById} from "@/api/result/longitudinalProjects";
import PdfPreview from "@/components/result/PdfPreview.vue";

const route = useRoute()
const router = useRouter()
const formRef = ref(null)

// 表单数据
const form = reactive({
  id: '',
  title: '',
  trainingUnit: '',
  hours: 0,
  score: '',
  obtainTime: '',
  remarks: '',
  projectId: '',
  syncStatus: '',
  pdfPath: ''
})

// 表单验证规则
const rules = {
  title: [{ required: true, message: '请输入材料标题', trigger: 'blur' }],
  trainingUnit: [{ required: true, message: '请输入培训单位', trigger: 'blur' }],
  hours: [{ required: true, message: '请输入课时', trigger: 'blur' }],
  obtainTime: [{ required: true, message: '请选择获得时间', trigger: 'change' }]
}

// 提交表单
const submitForm = async () => {
  router.push("/result/material");
}

// 安全转换日期为时间戳
const parseDateToTimestamp = (dateValue) => {
  if (!dateValue) return null;

  // 处理字符串格式日期（如"2025-08-13"）
  if (typeof dateValue === 'string') {
    const date = new Date(dateValue);
    return date.getTime(); // 转换为毫秒时间戳
  }

  // 处理数字类型时间戳
  if (typeof dateValue === 'number') {
    // 如果是秒级时间戳（10位数字），转换为毫秒级（13位）
    if (dateValue.toString().length === 10) {
      return dateValue * 1000;
    }
    return dateValue;
  }

  return null;
}

// 获取详情数据
onMounted(async () => {
  const id = route.query.id;
  if (id) {
    try {
      // 获取继续教育信息
      const res = await getMaterial(id);
      if (res.code === 200 && res.data) {
        const data = res.data;

        // 修复时间显示问题：使用安全转换函数处理日期
        data.obtainTime = parseDateToTimestamp(data.obtainTime);

        // 填充继续教育信息
        Object.assign(form, data);


      } else {
        ElMessage.error('获取继续教育信息失败');
      }
    } catch (error) {
      console.error('获取继续教育信息失败:', error);
      ElMessage.error('获取继续教育信息失败，请重试');
    }
    if (form.projectId) {
      const projectRes = await getProjectNameById(form.projectId);
      if (projectRes.code === 200 && projectRes.msg) {
        form.projectId = projectRes.msg;  // 将项目名称填充到 form.projectName 中
      } else {
        ElMessage.error('获取项目名称失败');
      }
    }
  }
});

</script>

<style scoped>
.upload-button {
  color: white;
  height: 3.8vh;
  width: 6.5vw;
  background-color: #00b38a;
  cursor: pointer;
  border: none;
}

.upload-button:hover {
  background-color: #009b77;
}

canvas {
  display: block;
  margin: 0 auto;
  background: white;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  transform-origin: top center;
}
</style>
